<template>
    <div>
        <div class="list">
            <div class="listOne" v-for="item in film" :key="item.id" @click="gotoDetail(item)">
                <div class="filmImg">
                    <div class="want">
                        {{(item.likeNum/10000).toFixed(2)}}万人想看
                    </div>
                    <img :src="'http://218.7.112.123:10001/'+item.cover" alt="">
                </div>
                <div class="filmContent">
                    <div class="name">{{item.name}}
                        <span>评分: <i>{{(item.score).toFixed(1)}}</i></span>

                    </div>
                    <div class="text" v-html="item.introduction"></div>
                    <div class="duration">
                        时长: <i>{{item.duration}}分钟</i>
                        <span>语言: <i>{{item.language}}</i></span>
                    </div>
                    <div class="timer">
                        上映时间: {{item.playDate}}

                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { filmList } from "@/service/movie/movieService";
export default {
    data() {
        return {
            film: [],
        }
    },
    async created() {
        let { data } = await filmList();
        console.log(data);
        this.film = data.rows;
    },
    methods: {
        gotoDetail(item) {
            this.$router.push("/movie/film/detail/" + item.id);
        }
    }
}

</script>
<style scoped lang="scss">
.list {
    padding: 10px;

    .listOne {
        padding: 10px;
        display: flex;
        height: 120px;

        .filmImg {
            width: 30%;
            margin-right: 20px;
            position: relative;

            .want {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 30px;
                line-height: 30px;
                text-align: center;
                background-color: rgba(0, 0, 0, 0.621);
                color: #fff;
            }

            img {
                width: 100%;
                height: 100%;
            }
        }

        .filmContent {
            width: 65%;

            .name {
                font-size: 18px;

                span {
                    float: right;

                    i {
                        font-size: 20px;
                        color: red;
                    }
                }
            }

            .text {
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                /*设置对齐模式*/
                -webkit-line-clamp: 2;
                /*设置多行的行数，示例为2行*/
            }

            .duration {
                margin-top: 10px;

                i {
                    color: red;
                }

                span {
                    margin-left: 10px;
                }
            }

        }
    }
}
</style>
